Buscador dinámico de Google

Me he decidido a cambiar de buscador, cada vez que accedía al blog de J.Miur me quedaba pensando en lo práctico que resulta acceder a las búsquedas en la misma página, sin salir del blog. Así que sin pensarlo dos veces puse manos a la obra y como siempre que se trata de un widget resulta supersencillo.
Para añadir este buscador debemos acceder a nuestro blog por Blogger in Draft
En elementos de página buscaremos "Caja de búsqueda"



Clicamos en "ADD TO BLOG" o lo que es lo mismo "Añadir al blog" nos muestra el lugar donde debemos marcar según las preferencias.

Si tenemos en nuestro blog el widget de "Lista de vínculos" y marcamos la casilla "Internet" también tendremos la oportunidad de realizar búsqueda en los vínculos añadidos.

Si lo único que deseamos mostrar es una búsqueda interna de nuestro blog bastará marcar "Este blog" en "En Acceso desde aquí" mostrará todas las páginas a las que tuvimos acceso desde las entradas del blog.

Inmediatamente que guardamos los cambios el buscador se instala en la sidebar, desde plantilla de diseño bastará con arrastrar la etiqueta hasta el lugar deseado.

El código del buscador es personalizable respecto a colores, para ello debemos expandir nuestra plantilla y buscar el código, lo podemos hacer pulsando las teclas control+f y añadiendo :

<!-- override gsearch.css -->

Lo que se encuentra entre <style type='text/css'> y </style> es el script, si deseamos modificarlo recomiendo guardar antes copia de la plantilla por si cometiéramos algún error.

Lo que yo hice fue copiar lo que se encuentra "dentro" del script y añadirlo a los CSS justo antes de ]]></b:skin> para facilitar su localización, una vez ahí fui probando colores hasta obtener el resultado.

Este es el ejemplo de mi buscador:

<!-- override gsearch.css -->
<style type='text/css'>
#uds-searchControl .gs-result .gs-title,
#uds-searchControl .gs-result .gs-title *,
#uds-searchControl .gsc-results .gsc-trailing-more-results,
#uds-searchControl .gsc-results .gsc-trailing-more-results * {color:#000;background: #ccc;padding:0 15px;line-height:20px;height:20px;margin:10px 0 5px 0;text-decoration:none;}
#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {color#000;text-decoration:none;}
#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {color: #940f04;font-size:10px;}
#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {color: #940f04;}
#uds-searchControl .gsc-results {border-color: #940f04;background-color: #F5F5F5;}
#uds-searchControl .gsc-tabhActive {border-color: #940f04;border-top-color: #940f04;background-color: #F5F5F5;color: #000;}
#uds-searchControl .gsc-tabhInactive {border-color: #940f04;background-color: transparent;color: #000;}
#uds-searchClearResults {border-color: #940f04;}
#uds-searchClearResults:hover {border-color: #940f04;}
#uds-searchControl .gsc-cursor-page {color: #000;text-decoration:none;}
#uds-searchControl .gsc-cursor-current-page {color: #940f04;}
#uds-searchControl .gsc-results .gsc-cursor-box .gsc-trailing-more-results {color:#000;text-decoration:none;background:none;}
input.gsc-input {border-color: #ccc;}
input.gsc-search-button {background:transparent url(URL-IMAGEN) no-repeat scroll 0 0;color:#ccc; border-color: #ccc;}
</style>